<template>
  <div class="fullMain">
    <x-header :left-options="{backText: '',showBack: false}">
      新建群公告
      <div v-transfer-dom>
        <alert v-model="isShowAlert"> {{alertText}}</alert>
      </div>
    </x-header>
    <div style="height:20px"/>
    <div class="mainbBg">
      <div id="checkBox">
        <input type="button" value="全选" @click="checkAll">
        <input type="button" value="反选" @click="checkOpp">
        <input type="button" value="不选" @click="checkNone">
      </div>
      <div class="userList">
        <div class="userInf" v-for="(item,index) in groupMembers" :key="index" style="margin: 6px">
          <input type="checkbox" :id='item.userId' class="item"></input>
          <label :for="item.userId">
            <img :src="item.detail.avatar" style="display: inline-block;width: 50px;height: 50px;border-radius: 25px">
            <span style="font-size: smaller;font-weight: bold">{{item.detail.name}}</span>
          </label>
        </div>
      </div>
      <div style="border:#ececec solid 1px;margin:10px 5px 10px 0;">
        <label>
          <textarea style="margin:10px 5px;height: 80px;width: 300px;border: none;" maxlength="80"
                    v-model="noticeContent"></textarea>
        </label>
        <label style="margin-left: 260px">{{contContent}}</label>
      </div>
      <div class="click_btn">
        <button class="my_button" @click="back">返回
        </button>
        <button class="my_button" @click="submit">发布
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  import {XHeader, Cell, Group, Confirm, Checklist} from 'vux'
  import {XInput, XButton} from 'vux'
  import {PopupPicker} from 'vux'
  import {mapState} from 'Vuex'
  import group from 'api/group'
  import {compareByPinyin} from 'utilMethods/sort.js'
  import {isInArray} from 'utilMethods/traversal.js'

  export default {
    name: 'T_send_message',
    data () {
      return {
        alertText: '',
        isShowAlert: false,

        groupNameTitle: '群名称',
        memberNumTitle: '群人数',
        groupId: '',
        groupName: '',
        groupMembers: [],
        noticeContent: '',//公告内容
        contContent: '0/80',//统计公告内容的字数
        receiverList: [],//公告接收对象
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      ...mapState(['groupPresent'])
    },
    mounted () {
      // this.getGroupInfo()
      this.getGroupMembers()
    },
    watch: {
      noticeContent (val) {
        this.contContent = this.noticeContent.length + '/' + '80'
        console.log(this.contContent)
      }
    },
    components: {
      XHeader,
      XInput,
      PopupPicker,
      Group,
      Confirm,
      XButton,
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },

      checkAll () {
        let items = document.getElementsByClassName('item')
        for (let i = 0; i < items.length; i++) {
          items[i].checked = true
        }
      },
      checkOpp () {
        let items = document.getElementsByClassName('item')
        for (let i = 0; i < items.length; i++) {
          items[i].checked = !items[i].checked
        }
      },
      checkNone () {
        let items = document.getElementsByClassName('item')
        for (let i = 0; i < items.length; i++) {
          items[i].checked = false
        }
      },

      async getGroupMembers () {
        this.groupId = this.groupPresent.groupId;
        if (!this.groupId) {
          return
        }
        const result = await group.getInfoOfMembers({groupId: this.groupId})
        console.log(result)
        if (result.code === 0) {
          this.showAlert('群成员获取失败，请稍后再试')
        } else {
          this.groupMembers = result.data
          // rock wang: 按姓名排序（存在多音字问题）
          this.groupMembers.sort(compareByPinyin('userName'))
          this.memberNum = result.data.length
        }
      },
      async submit () {
        this.receiverList.length = 0
        let items = document.getElementsByClassName('item')
        if (this.noticeContent.length === 0) {
          this.showAlert('公告内容不允许为空')
          return
        }
        for (let i = 0; i < items.length; i++) {
          if (items[i].checked) {
            this.receiverList.push(items[i].id)
          }
        }
        if (this.receiverList.length === 0) {
          this.showAlert('请选择想要发送的学生')
        } else if (this.receiverList.length === items.length) {
          //向整个群发送公告
          const result = await group.getSendToGroup({
            groupId: this.groupId,
            message: this.noticeContent,
            srcUserId: this.userInfo.userId
          })
          console.log(result)
          this.showAlert(result.data)
          setTimeout(this.closeTip, 1800)
          if (result.data == '发送成功') {
            this.noticeContent = ''
            this.checkNone()
          }
        } else {
          //向部分群成员发送公告
          const result = await group.getSendMessage({
            groupId: this.groupId,
            message: this.noticeContent,
            srcUserId: this.userInfo.userId,
            userIds: this.receiverList
          })
          console.log(result)
          this.showAlert(result.data)
          setTimeout(this.closeTip, 1800)
          if (result.data == '发送成功') {
            this.noticeContent = ''
            this.checkNone()
          }
        }
      }
    }
  }
</script>
<style scoped>
  .click_btn {
    height: 40px;
    width: 80%;
    margin: 3px auto;
    display: flex;
    justify-content: space-around;
  }

  .my_button {
    width: 120px;
    height: 40px;
    border: none;
    color: white;
    background: #1abc9c;
    text-align: center;
    outline: none;
    border-radius: 5px;
    margin-left: 15px;
  }

  #checkBox input {
    color: white;
    background: #1abc9c;
    border: none;
    border-radius: 3px;
    margin: auto 10px;
    /* padding:5px; */
  }

  #checkBox {
    border: #ececec dashed 1px;
    border-radius: 5px;
    padding: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
  }
</style>
